<template>
  <el-drawer v-bind='$attrs' :title="$t('common.detail')" v-on='$listeners' size="800px">
    <div class='px-7' style='padding-bottom: 20px;'>
      <el-descriptions :column="1" border>
        <el-descriptions-item :label="$t('developer.debug_device.developer_name')">{{ dataForm.developerName }}</el-descriptions-item>
        <el-descriptions-item :label="$t('developer.debug_device.apply_batch_no')">{{ dataForm.deviceApplyBatchNo }}</el-descriptions-item>
        <el-descriptions-item :label="$t('developer.debug_device.model_code')">{{ dataForm.modelCode }}</el-descriptions-item>
        <el-descriptions-item :label="$t('developer.debug_device.dev_sn')">{{ dataForm.devSn }}</el-descriptions-item>
        <el-descriptions-item :label="$t('developer.debug_device.logistics_name')">{{ dataForm.logisticsName }}</el-descriptions-item>
        <el-descriptions-item :label="$t('developer.debug_device.logistics_no')">{{ dataForm.logisticsNo }}</el-descriptions-item>
        <el-descriptions-item :label="$t('developer.debug_device.ota_type')">
          <el-tag v-if="dataForm.otaType" size="small">{{ otaTypeFilter(dataForm.otaType) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('developer.debug_device.ota_version')">{{ dataForm.otaVersion }}</el-descriptions-item>
        <el-descriptions-item :label="$t('developer.debug_device.status')">
          <el-tag v-if='dataForm.status === 1' size="small" type='success'>{{ statusFilter(dataForm.status) }}</el-tag>
          <el-tag v-if='dataForm.status !== 1' size="small">{{ statusFilter(dataForm.status) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('developer.debug_device.apply_time')">{{ timeFilter( dataForm.applyTime ) }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-drawer>
</template>

<script>
import { timeFilter, dateFilter } from '@/filters/index'
export default {
  data() {
    return {
      dataForm: {
      }
    }
  },
  methods: {
    timeFilter,
    dateFilter,
    otaTypeFilter (type) {
      const typeMap = {
        1: this.$t('developer.debug_device.ota_type_list.dev'),
        2: this.$t('developer.debug_device.ota_type_list.prod')
      }
      return typeMap[type]
    },
    statusFilter (status) {
      const statusMap = {
        0: this.$t('developer.debug_device.device_status_list.wait_for_send'),
        1: this.$t('developer.debug_device.device_status_list.send'),
        2: this.$t('developer.debug_device.device_status_list.Receipted')
      }
      return statusMap[status]
    },
    init (deviceInfo) {
      console.log(deviceInfo)
      this.dataForm = deviceInfo
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
